<template>
  <div>
    <p>子组件--数据信息：dataDescription:{{ dataDescription }} data2:{{ data2 }}</p>
    <p>接收到父组件传递的数据信息：id:{{ id }} flag:{{ flag }} data:{{ data }}</p>
    <a-space size="middle">
      <a-input
        v-model:value="dataDescription"
        size="small"
        show-count
        :maxlength="100"
        placeholder="输入文本信息时自动获取输入值"
        allow-clear
      />
      <a-button type="primary" @click="getChildInput1(dataDescription)"
        >点击将子组件中的数据传递值父组件</a-button
      >
      <a-button type="primary" @click="generateData"
        >先点击此按钮自动生成传递至父组件的数据</a-button
      >
      <a-button type="primary" @click="getChildInput2(data2)"
        >点击将子组件中的数据传递值父组件</a-button
      >
      <a-button type="primary" @click="generateDataAndSendToParent"
        >生成数据并传递至父组件</a-button
      >
      <a-button type="primary" @click="$emit('parentComponentMethod', data2.time)"
        >$emit调用父组件事件</a-button
      >
      <a-button type="primary" @click="callParentComponentMethod"
        >context.emit调用父组件事件</a-button
      >
    </a-space>
  </div>
</template>
<script setup lang="ts">
  console.log('Demo(使用setup函数)--组件props--子组件/页面 setup 语法糖 执行了。');

  import { ref, reactive } from 'vue';
  import { TimeAndFlagDataModel } from './data';
  import { message } from 'ant-design-vue';

  //https://blog.csdn.net/sepgit/article/details/124923650
  const props = defineProps({
    id: {
      type: String,
      //使用required指定必须传值
      required: true,
    },
    flag: {
      type: Boolean,
    },
    data: {},
    getChildInput1: Function,
    getChildInput2: Function,
  });

  //https://blog.csdn.net/sepgit/article/details/125345102
  const emits = defineEmits(['parentComponentMethod']);

  //定义接收子组件界面中输入值，作为动态数据传递给父组件
  const dataDescription = ref('默认输入值');
  const data2: TimeAndFlagDataModel = reactive({
    time: new Date(),
    flag: new Date().getSeconds() % 3 > 1,
  });

  function generateData() {
    var now = new Date();
    data2.time = now;
    data2.flag = now.getSeconds() % 3 > 1;
  }

  function generateDataAndSendToParent() {
    var now = new Date();
    data2.time = now;
    data2.flag = now.getSeconds() % 3 > 1;
    props.getChildInput2(data2);
  }

  //调用父组件中的事件方法
  function callParentComponentMethod() {
    emits('parentComponentMethod', data2.time);
  }

  // const showMessageMethod = (event) => {
  //   message.info('子组件中提示信息：父组件调用子组件方法，参数为：', 5);
  // };
  function showMessageMethod(data) {
    message.info('子组件中提示信息：父组件调用子组件方法，参数为：' + data, 5);
  }

  //需要在子组件中使用defineExpose暴露出去，否则父组件中找不到子组件的方法
  defineExpose({ showMessageMethod });
</script>
<style scoped></style>
